<template>
  <view :class="topClass">
    <view
      v-for="tab in tabs"
      :class="tab.value === modelValue ? 'tab checked' : 'tab'"
      :key="tab.value"
      @click="$emit('update:modelValue', tab.value)"
      >
      <view class="txt">
        {{ tab.label }}
      </view>
    </view>
  </view>
</template>
<script setup>
  import { watch, ref, computed } from 'vue';
   
  const props = defineProps({
    tabs: {
      type: Array,
      default: () => []
    },
    modelValue: {
      type: String,
      default: ''
    }
  });

  defineEmits(["update:modelValue"]);
  // const topClass = ref('');

  // watch(() => modelValue, () => {
  //   debugger;
  //   const index = tabs.findIndex(v => v.value === modelValue);
  //   topClass.value = `tab-wrapper checked${index}`;
  // })
  const topClass = computed(() => {
    const index = props.tabs.findIndex(v => v.value === props.modelValue);
    return `tab-wrapper checked${index}`;
  })

  

</script>
<style lang="scss" scoped>
.tab-wrapper {
  background-color: #fff;
  height: 106upx;
  display: flex;
  justify-content: f;
  .tab {
    width: 50%;
    height: 100%;
    .txt {
      width: 100%;
      height: 100%;
      display: flex;
      justify-content: center;
      align-items: center;
    }
  }
  &.checked0 {
    .tab {
      background-color: #fff;
      .txt {
        background-color: #f5f5f5;
        border-top-right-radius: 0;
        border-bottom-left-radius: 66upx;
      }
      &.checked {
        background-color: #f5f5ff;
        .txt {
          background-color: #fff;
          border-bottom-left-radius: 0;
          border-top-right-radius: 66upx;
          font-weight: bold;
        }
      }
    }
  }
  &.checked1 {
    .tab {
      background-color: #fff;
      .txt {
        background-color: #f5f5f5;
        border-bottom-left-radius: 0;
        border-bottom-right-radius: 66upx;
      }
      &.checked {
        background-color: #f5f5ff;
        .txt {
          background-color: #fff;
          border-top-left-radius: 66upx;
          border-bottom-right-radius: 0;
          font-weight: bold;
        }
      }
    }
  }
}
</style>